<template>
  <div>
    <h1>1.ref 和 $refs 获取原生dom对象</h1>
    <h2 ref="title">这是h2</h2>
    <button @click="getH2">点我获取h2</button>
    <h1>2.ref 和 $refs 获取组件对象</h1>
    <Demo ref="de" />
    <button @click="getDemo">点我获取Demo组件</button>
  </div>
</template>

<script>
import Demo from "./components/Demo.vue";
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {
    getH2() {
      console.log(this.$refs.title);
    },
    getDemo() {
      console.log(this.$refs.de);
      console.log(this.$refs.de.de);
      this.$refs.de.demoFn();
    },
  },

  components: { Demo },
};
</script>

<style >
</style>